<template>
  <div id="app"></div>
</template>
        
        <script>
import * as PIXI from "pixi.js";
export default {
  setup() {
    let app = new PIXI.Application({
      width: window.innerWidth,
      height: window.innerHeight,
      backgroundColor: "white",
      resolution: window.devicePixelRatio || 1,
    });
    // 未来开发时，我们的应用可能会有不同的场景，不同场景下用到的资源也自然不同，所以我们也可以根据场景来添加资源, 传入自定义的场景名称以及一个对象，对象里键值对对应资源的名称和源
    PIXI.Assets.addBundle("genshin", {
      bcsz: require("./assets/imgs/bcsz.png"),
      kq: require("./assets/imgs/kq.png"),
      nl: require("./assets/imgs/nl.png"),
    });

    //  然后根据场景进行加载资源
    let picturesPromise = PIXI.Assets.loadBundle("genshin", (progress) => {
      console.log(`完成进度: ${progress}`);
    });

    // 加载完成后的使用其实和之前一样，就是通过调用加载方法返回的promise对象，然后在then的回调参数里获取到其中的资源。分场景加载的好处就是让结构更清晰，不会出现资源混乱的情况
    picturesPromise.then((textures) => {
      // 我们可以创建一个容器用来装所有的精灵，当然也可以不创建直接app.stage.addChild
      let container = new PIXI.Container();

      let sprite1 = new PIXI.Sprite(textures.bcsz);
      let sprite2 = new PIXI.Sprite(textures.nl);
      let sprite3 = new PIXI.Sprite(textures.kq);

      sprite1.x = 200;
      sprite1.y = 200;
      sprite1.width = 100;
      sprite1.height = 100;

      sprite2.x = 400;
      sprite2.y = 200;
      sprite2.width = 100;
      sprite2.height = 100;

      sprite3.x = 600;
      sprite3.y = 200;
      sprite3.width = 100;
      sprite3.height = 100;

      //   可以先放容器里再app.stage.addChild添加容器，如果没创建容器就直接添加各个精灵
      container.addChild(sprite1);
      container.addChild(sprite2);
      container.addChild(sprite3);

      app.stage.addChild(container);
    });
    document.body.appendChild(app.view);
  },
};
</script>
        
  <style>
canvas {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
</style>
        